<template>
	<view class="container">
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<view class="tui-set-box">
			
			<tui-list-cell padding="0" :lineLeft="0" :arrow="true" @click="goBackList()">
				<view class="tui-list-cell">
					<view class="tui-list-cell-key">返回签到列表</view>
					<view class="tui-list-cell-val"></view>
				</view>
			</tui-list-cell>
			
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">参加会议</view>
						<view class="tui-list-cell-val">{{dataInfo.meet_name}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">手机号</view>
						<view class="tui-list-cell-val">{{dataInfo.user_phone}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">信誉分</view>
						<view class="tui-list-cell-val">{{dataInfo.user_credit_score}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">累计消费</view>
						<view class="tui-list-cell-val">{{dataInfo.user_money_sum}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">获得悬赏金</view>
						<view class="tui-list-cell-val">{{dataInfo.user_money_meet_award}}</view>
					</view>
				</tui-list-cell>
			</view>
			
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">当前状态</view>
						<view class="tui-list-cell-val">{{dataInfo.status_name}}</view>
					</view>
				</tui-list-cell>
			</view>
			
			
			<view class="tui-edit" @click="postSingEdit(1)">
				<tui-button type="green" width="500rpx" height="80rpx" :size="30">正常签到</tui-button>
			</view>
			
			<view class="tui-edit" @click="postSingEdit(2)">
				<tui-button type="warning" width="500rpx" height="80rpx" :size="30">迟到5分钟签到</tui-button>
			</view>
			
			<view class="tui-edit" @click="postSingEdit(3)">
				<tui-button type="primary" width="500rpx" height="80rpx" :size="30">提前请假</tui-button>
			</view>
			
			<view class="tui-edit" @click="postSingEdit(4)">
				<tui-button type="danger" width="500rpx" height="80rpx" :size="30">未参加会议</tui-button>
			</view>

			<view class="tui-exit" @click="postSingEdit(11)">
				<tui-button type="gray" width="500rpx" height="80rpx" :size="30">会议尚未开始</tui-button>
			</view>
			
		</view>
		
		<tui-fab :bottom="150" :btnList="fabList" @click="goFabUrl"></tui-fab>
		
	</view>
</template>

<script>
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiFab from "@/components/thorui/tui-fab/tui-fab.vue"
	export default {
		components: {
			tuiListCell,
			tuiButton,
			footerMenu,
			tuiIcon,
			tuiFab,
		},
		
		data() {
			return {

				infoId: 0,
				meetId: 0,
				dataInfo: [],
				
				
				fabList:[{bgColor: "#16C2C2",text: "会议",fontSize: 28,color: "#fff"},
						{bgColor: "#FF0099",text: "报名",fontSize: 28,color: "#fff"},
						{bgColor: "#64B532",text: "签到",fontSize: 28,color: "#fff"},
						{bgColor: "#ff4700",text: "签离",fontSize: 28,color: "#fff"},
						{bgColor: "#FFA500",text: "奖励",fontSize: 28,color: "#fff"}],
						
						
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
						{icon: "service", text: "发现", size: 24},
						{icon: "people", text: "我的", size: 24}],
			}
		},
		
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/shop/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			goFabUrl: function(e) {
				let jumpUrl = '';
				let idx = e.index || 0;
				if(idx == 0) {
					jumpUrl = '/pages/meet/admin?info_id=' + this.meetId;
				} else if (idx == 1){
					jumpUrl = '/pages/meet/sign-up?info_id=' + this.meetId;
				} else if (idx == 2){
					jumpUrl = '/pages/meet/sign-in?info_id=' + this.meetId;
				} else if (idx == 3){
					jumpUrl = '/pages/meet/sign-out?info_id=' + this.meetId;
				} else if (idx == 4){
					jumpUrl = '/pages/meet/award?info_id=' + this.meetId;
				}
				 uni.navigateTo({
				 	url: jumpUrl,
				 });
			},
			
			goBackList: function(){
				uni.navigateTo({
					url: '/pages/meet/sign-in?info_id='+this.meetId
				});
			},
			
			
			getSingUpInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/meet/signInInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						info_id: this.infoId,
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.dataInfo = resData;
						this.meetId = resData.meet_id;
					}
				});
			},
			
			
			//用户报名
			postSingEdit: function(e) {
				uni.request({
					url: this.$apiUrl+ '/api/meet/signInEdit',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: { 
						info_id: this.infoId,
						status: e,
					},
					success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						this.tui.toast(resMsg);
						if(resErr == 0 ){		//发送成功的时候
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/meet/sign-in?info_id='+this.meetId
								});
							}, 1000)
						}
					}
				});
			},
			
		},
		
		onLoad: function(options) {
			this.infoId = options.id || 0;
			
			this.getSingUpInfo();
			
		},
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}
	
	.tui-list-cell-key {
		width: 200rpx;
	}
	
	.tui-list-cell-val {
		color: #00CC99;
	}

	.tui-info-box {
		font-size: 34rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}
	
	.tui-edit {
		margin-top: 20rpx;
		padding: 20rpx 100rpx;
	}

	.tui-exit {
		margin-top: 20rpx;
		padding: 10rpx 100rpx;
		margin-bottom: 400rpx;
	}
</style>